<template>
  <div id="he-plugin-standard" style="width: 100%;height: 100%;"></div>
</template>
<script>
  import axios from "axios"
  import { defineComponent, inject, reactive, toRefs, nextTick } from 'vue'
  export default defineComponent({
    setup() {
      const echarts = inject('echarts')
      const state = reactive({
        datas: '',
      })
      
      const weather = () => {
        const s = document.createElement("script")
        s.type = "text/javascript";
        s.src =
          "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
        document.body.appendChild(s);
      }
      const setData = () => {
        const dom = document.getElementById('he-plugin-standard')
        window.WIDGET = {
          "CONFIG": {
            "layout": "1",
            "width": dom.clientWidth,
            "height": dom.clientHeight,
            "background": "5",
            "dataColor": "FFFFFF",
            "city": "CN101120901",
            "key": "f0c81d1ef9c34e23b594ec42caf9e398"
          }
        }
        weather()
      }
      return {
        ...toRefs(state),
        setData,
      };
    },
  });
</script>
<style lang="less" scoped>
#he-plugin-standard {
  height: 25vh;
  overflow: auto;
}
</style>
<style>
.he-plugin-standard {
  width: 100% !important;
  height: 100% !important;
}
.wv-lt-location>span {
  font-size: 0.7vw;
  font-weight: 600;
}
.wv-lt-refresh a {
  display: none;
}
.wv-f-forecast-date>a,
  .wv-n-h-now-txt, .wv-n-h-now-rain-text,
  .wv-f-forecast-tmp {
  font-size: 0.7vw !important;
  font-weight: 600;
}
</style>